<template>
  <div style="overflow: hidden; width: 100%; height: 100%">
    <VxeBasicTable ref="tableRef" v-bind="gridOptions">
      <template #toolbar_buttons>
        <Button type="primary" @click="handleCreate" style="margin-right: 10px"> 新增入库 </Button>


        <Button @click="aoaToExcel" style="margin-right: 10px"> 模版下载 </Button>
        <Button  danger @click="showDeleteConfirm"> 批量删除 </Button>

      </template>
      <template #action="{ row }">
<!--        <TableAction outside :actions="getActions(row)" />-->
      </template>

    </VxeBasicTable>
    <FormModal @register="register" @success="handleSuccess" />
    <AddFormModal @register="userModal[0]" @success="handleSuccess"></AddFormModal>
  </div>
</template>
<script lang="ts" setup>
import {deletesApi, listApi} from '@/api/sys/wmStorage';
  import FormModal from './FormModal.vue';
  import AddFormModal from './AddFormModal.vue';

  import { aoaToSheetXlsx, ImpExcel } from '@/components/Excel';
  import {
    BasicTableProps,
    VxeBasicTable,
    VxeGridInstance,
    VxeGridListeners,
  } from '@/components/VxeTable';
  import {columns, orderColumns, searchFormSchema} from './role.data';
  import { useMessage } from '@/hooks/web/useMessage';
  import {Button, Modal} from 'ant-design-vue';

  import { useModal } from '@/components/Modal';
  const userModal = useModal();

  import {createVNode, reactive, ref} from "vue";
import util from "@/utils/util";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
  defineOptions({ name: 'goodList' });
  const { createMessage } = useMessage();
  const [register, { openModal, closeModal }] = useModal();
  const tableRef = ref<VxeGridInstance>();

  const gridOptions = reactive<BasicTableProps>({
    id: 'VxeTable',
    keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    showOverflow: true,
    size: 'mini',
    height: 'auto',
    columns: [...columns],
    toolbarConfig: {
      slots: {
        buttons: 'toolbar_buttons',
      },
    },
    checkboxConfig: {
      labelField: 'name',
      highlight: true
    },
    rowConfig: {
      labelField: 'storageId',
      trigger: 'row',
    },

    formConfig: {
      enabled: true,
      items: searchFormSchema,
    },
    pagerConfig: {
      pageSize: 20,
    },
    proxyConfig: {
      props: {
        result: 'data.list',
        list: 'data.list',
        total: 'data.totalResult',
        message: 'message',
      },
      ajax: {
        query: async ({ page, form, order }) => {
          return listApi({
            page: page.currentPage,
            pageSize: page.pageSize,
            type: 1,
            ...form,
            order,
          });
        },
        // queryAll: async ({ form }) => {
        //   return await demoListApi(form);
        // },
      },
    },
  });

  function handleCreate() {
    // openModal(true, {
    //   isUpdate: false,
    // });
    openUserModal()
  }

  function openUserModal() {
    userModal[1].openModal(true, {
      isUpdate: false

    });
  }

  function handleEdit(record: Recordable) {
    openModal(true, {
      record,
      isUpdate: true,
    });
  }

const showDeleteConfirm = () => {
  let keys = tableRef.value.getCheckboxRecords(true);

  // let keys = tableRef.value.getSelectRowKeys();
  if(util.isEmpty(keys)){
    createMessage.error("请先勾选入库记录");
    return false;
  }
  Modal.confirm({
    title: () => '提示信息',
    icon: () => createVNode(ExclamationCircleOutlined),
    content: () => '删除后将不可恢复',
    okText: () => '确定',
    okType: 'danger',
    cancelText: () => '取消',
    onOk() {
      handleDelete(keys)
    },
    onCancel() {
      console.log('Cancel');
    },
  });
}


function handleDelete(list) {
  //console.log(record);
  let arr=[];
  list.forEach(e=>{
    arr.push(e.storageId)
  })

  deletesApi({storageIds:arr.join(",")})
    .then((res) => {
      createMessage.success(res.message);
      handleSuccess()
    })
    .catch((res) => {
      createMessage.error(res.message);
    })
    .finally(() => {
    });
}





  const loading=ref(false);

  function handleSuccess() {
    tableRef.value.commitProxy('reload');
  }



  function aoaToExcel() {
    // 保证data顺序与header一致
    // let arrHeader=[ "费用名称","金额","供应商名称","产品名称","备注","开始日期","退款条件类型","退款条件数量","经办人"];
    // aoaToSheetXlsx({
    //   data: [],
    //   header: arrHeader,
    //   filename: '费用导入模版.xlsx',
    // });

    window.open('http://www.jiezuowenhua.com.cn/app_file/excel/商品导入模版.xls');
  }
</script>
